<template>
  <div class="container">
    <div>
      <div>
        <el-form :model="updatelist" label-position="top" size="small" ref="updatelist" :rules="appendrules"
          label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="码表分类" prop="codeType">
                <el-select v-model="classify" clearable placeholder="码表分类" :disabled="true">
                  <el-option v-for="item in classifyOptions" :key="item.codeType" :label="item.codeTypeName" :value="item.codeType">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="码表状态" prop="status">
                <el-select v-model="updatelist.status" clearable placeholder="码表分类">
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="代码类别" prop="codeType">
                  <el-input v-model="updatelist.codeType" placeholder="代码类别" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类别名称" prop="codeTypeName">
                  <el-input v-model="updatelist.codeTypeName" placeholder="类别名称" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="代码值" prop="codeValue">
                  <el-input v-model="updatelist.codeValue" placeholder="代码值" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="代码名称" prop="codeName">
                  <el-input v-model="updatelist.codeName" placeholder="代码名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="排序号" prop="orderNo">
                  <el-input v-model="updatelist.orderNo" placeholder="排序号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
        <el-button size="small" type="primary" @click="createSubmit('updatelist')">保 存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['listId'],
    data() {
      return {
        classify: this.listId.codeType,
        classifyOptions: [],
        hhh: '',
        statusOptions: [{
          value: '0',
          label: '未禁用'
        },
        {
          value: '1',
          label: '已禁用'
        }
        ],
        updatelist: this.listId,
        appendrules: {
          codeType: [{
            message: '代码类别不能为空',
            required: true,
            trigger: 'blur'
          },
          {
            min: 1,
            max: 64,
            message: '长度在 1 到 64 个字符',
            trigger: 'blur'
          }
          ],
          codeValue: [{
            message: '代码值不能为空',
            required: true,
            trigger: 'blur'
          },
          {
            min: 1,
            max: 128,
            message: '长度在 1 到 128 个字符',
            trigger: 'blur'
          }
          ],
          codeTypeName: [{
            required: false,
            trigger: 'blur'
          },
          {
            min: 1,
            max: 64,
            message: '长度在 1 到 64 个字符',
            trigger: 'blur'
          }
          ],
          codeName: [{
            required: false,
            trigger: 'blur'
          },
          {
            min: 1,
            max: 64,
            message: '长度在 1 到 64 个字符',
            trigger: 'blur'
          }
          ],
          orderNo: [{
            required: false,
            trigger: 'blur'
          },
          {
            min: 1,
            max: 16,
            message: '长度在 1 到 16 个字符',
            trigger: 'blur'
          }
          ]
        },
        classifylist: {
          'fields': [
            'codeType',
            'codeTypeName'
          ],
          sort: [{
            direction: 'DESC',
            property: 'fcTime'
          }]
        }
      }
    },
    created() {
      // 组件创建完后获取数据，
      this.fetchData()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['fetchData'],
      'updatelist.codeType'(n, o) {
        let obj = {}
        obj = this.classifyOptions.find((item) => {
          return item.codeType === n
        })
        this.updatelist.codeType = obj.codeType
        this.updatelist.codeTypeName = obj.codeTypeName
        // console.log(obj)
      }
    },
    methods: {
      fetchData() {
        this.$store.dispatch('CodeCompositeSelect', this.classifylist).then(res => {
          this.classifyOptions = res.data.records
          // console.log(this.classifyOptions)
        }).catch((err) => {
          console.log(err)
        })
      },
      updateData() {
        this.$store.dispatch('CodUpdate', this.updatelist).then(res => {

          // this.fetchData()
          // this.$refs['updatelist'].resetFields()
        }).catch((err) => {
          console.log(err)
        })
      },
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.updatelist)
            let updataList = {
              condition: [{
                property: 'codeType',
                value: this.updatelist.codeType,
                type: 'EQ'
              },
              {
                property: 'codeValue',
                value: this.updatelist.codeValue,
                type: 'EQ'
              }
              ],
              value: {
                codeName: this.updatelist.codeName,
                codeTypeName: this.updatelist.codeTypeName,
                orderNo: this.updatelist.orderNo,
                status: this.updatelist.status
              }
            }
            // this.updateData()
            this.$store.dispatch('CodUpdate', updataList).then(res => {
              if (res.statusCode === 200) {
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                })
                this.$emit('changeCloseDialog')
              } else {
                this.$message({
                  type: 'danger',
                  message: '编辑失败!'
                })
              }
            }).catch((err) => {
              this.$message({
                type: 'danger',
                message: '编辑失败!'
              })
            })
          } else {
            return false
          }
        })
      },
      cancelSubmit() {
        this.$emit('changeCloseDialog')
      }
    }
  }

</script>
<style scoped>
  .menu-navbar {
    padding: 0 0 20px;
    text-align: right;
  }

  .container {
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

</style>
